<template>
	<view>
		<!-- #ifdef MP -->
		<uni-nav-bar ></uni-nav-bar >
		<view>
			<view
				class="iconfont icon-guanbi flex align-center justify-center font-lg"
				style="width: 100rpx;height: 100rpx;"
				hover-class="bg-light"
				@click="back"
			></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<uni-nav-bar ></uni-nav-bar >
		<view>
			<view
				class="iconfont icon-guanbi flex align-center justify-center font-lg"
				style="width: 100rpx;height: 100rpx;"
				hover-class="bg-light"
				@click="back"
			></view>
		</view>
		<!-- #endif -->
		
		<!-- 账号密码 标题 -->
		<view class="text-center" style="padding-top: 130rpx; padding-bottom: 70rpx; font-size: 55rpx"
			>{{ status ? '手机验证码登录' : '账号密码登录' }}
		</view>
		<view class="px-2">
			<!-- 账号 密码登录输入 布局 -->
			<template v-if="!status">
				<view class="mb-2">
					<input type="text" v-model="username" placeholder="账号/手机号/邮箱" class="border-bottom p-2" />
				</view>
				<view class="mb-2 flex align-stretch">
					<input type="text" v-model="password" placeholder="请输入密码" class="border-bottom p-2 flex-1" />
					<view class="border-bottom flex align-center justify-center font text-muted" style="width: 150rpx"
						>忘记密码？</view
					>
				</view>
			</template>
			<template v-else>
				<!-- 验证码登录 输入 布局-->
				<view class="mb-2 flex align-stretch">
					<view class="border-bottom flex align-center justify-center font px-2">+86</view>
					<input type="text" v-model="phone" placeholder="手机号" class="border-bottom p-2 flex-1" />
				</view>
				<view class="mb-2 flex align-stretch">
					<input type="text" v-model="vercode" placeholder="请输入验证码" class="border-bottom p-2 flex-1" />
					<view
						class="border-bottom flex align-center justify-center font-sm text-white font-weight-bold"
						:class="codeTime > 0 ? 'bg-main-disabled' : 'bg-main'"
						style="width: 180rpx"
						@click="getCode"
						>{{ codeTime > 0 ? codeTime + ' s' : '获取验证码' }}</view
					>
				</view>
			</template>
		</view>
		<!-- 登录按钮 -->
		<view class="py-2 px-3">
			<button
				class="bg-main text-white"
				style="border-radius: 50rpx; border: 0"
				type="primary"
				:disabled="disabled"
				:class="disabled ? 'bg-main-disabled' : ''"
				@click="submit"
				:loading="loading"
			>
				{{ loading ? '登录中...' : '登录' }}
			</button>
		</view>
		<!-- 验证码登录 -->
		<view class="flex align-center justify-center pt-2 pb-4">
			<view class="text-primary font-sm" @click="changeStatus">
				{{ status ? '账号密码登录' : '验证码登录' }}</view
			>
			<text class="text-muted mx-2">|</text>
			<view class="text-primary font-sm">登录遇到问题</view>
		</view>
		<!-- 社区账号登录 -->
		<view class="flex align-center justify-center">
			<view style="height: 1rpx; background-color: #dddddd; width: 100rpx"></view>
			<view class="mx-2 text-muted">社区账号登录</view>
			<view style="height: 1rpx; background-color: #dddddd; width: 100rpx"></view>
		</view>
		<!--引入 第三方登录 组件 -->
		<otherLogin back></otherLogin>
		<!-- 社区协议 -->
		<view class="flex align-center justify-center text-muted pt-3">
			注册即代表同意<text class="text-primary">《Knight社区协议》</text>
		</view>
	</view>
</template>
<script>
	// 引入第三方登录组件
	import otherLogin from '@/components/common/other-login.vue';
	export default {
		components: {
			otherLogin,
		},
		data() {
			return {
				// 手机状态栏的高度
				// statusBarHeight: 0,
				// false账号密码登录，true验证码登录
				status: false,
				username: '', // 账号
				password: '', // 密码
				phone: '', // 手机号
				vercode: '', // 验证码
				codeTime: 0, // 获取验证码倒计时
				loading: false, // 防止用户重复登录
			};
		},
		// 监听页面加载时 -----------------------------------------------
		onLoad() {
			// 获取系统信息，手机状态栏的高度
			// let { statusBarHeight } = uni.getSystemInfoSync();
			// this.statusBarHeight = statusBarHeight;
		},
		// 计算属性 ----------------------------------------------------
		computed: {
			// 账号 密码登录时，输入框为空，禁用按钮(||或者 ,&&并且)
			// 手机号 验证码登录时，输入框为空，禁用按钮
			disabled() {
				if ((this.username === '' || this.password === '') && (this.phone === '' || this.vercode === '')) {
					return true;
				}
				return false;
			},
		},
		// 存放所有事件 -------------------------------------------------
		methods: {
			// 顶部x图标，返回上一页
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 初始化表单，用切换的时候，清空，防止验证码登录，无法禁用
			initForm() {
				(this.username = ''), (this.password = ''), (this.phone = ''), (this.vercode = '');
			},
			// 验证码登录 点击事件，切换登录或验证码 输入框
			changeStatus() {
				// 调用初始化表单
				this.initForm();
				this.status = !this.status;
			},
			// 获取验证码
			getCode() {
				// 如果正在倒计时，获取验证码 按钮将不在 可点击(防止重复获取)
				if (this.codeTime > 0) return;
				// 表单验证
				if (!this.validate()) return;
				// 请求 获取验证码 接口 -------------------------------
				this.$H
					.post(
						'/user/sendcode',
						{
							phone: this.phone,
						},
						{
							native: true, //返回原始数据
						},
					)
					.then((res) => {
						uni.showToast({
							title: '验证码为:' + res.data.msg,
							icon: 'none',
							duration: 3000,
						});
						// 设置定时器，每一秒减一
						this.codeTime = 30; // 倒计时秒 数
						let timer = setInterval(() => {
							if (this.codeTime >= 1) {
								this.codeTime--;
							} else {
								this.codeTime = 0;
								clearInterval(timer); //清除计时器
							}
						}, 1000);
						console.log(res);
					});
			},
			// 表单验证
			validate() {
				// 手机号正则
				var mPattern = /^[1][3-9][0-9]{9}$/;
				//短信验证码的正则表达式 六位数字
				var mVercode = /^\d{6}$/;
				// 账号验证 （账号必须为6-20位字母和数字组合）
				var mUsername = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/;
				// 邮箱验证
				var mEmail = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
				// 密码验证
				// (请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种)
				var mPassword = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/;
				// // 条件判断
				if (this.status) {
					//true验证码登录
					if (!mPattern.test(this.phone)) {
						uni.showToast({
							title: '手机号格式不正确',
							icon: 'none',
						});
						return false;
					}
				} else {
					// false账号密码登录
					if (!mPattern.test(this.username) && !mEmail.test(this.username)) {
						uni.showToast({
							title: '请输入正确手机号或邮箱或账号',
							icon: 'none',
						});
						return false;
					} else if (!mPassword.test(this.password)) {
						uni.showToast({
							title: '请输入正确登录密码',
							icon: 'none',
						});
						return false;
					}
				}
				return true;
			},
			// 登录按钮
			submit() {
				// 表单验证
				let url = '';
				let data = '';
				if (this.status) {
					// 手机验证码登录
					if (!this.validate()) return;
					url = '/user/phonelogin';
					data = {
						phone: this.phone,
						code: this.vercode,
					};
				} else {
					// 账号密码登录
					url = '/user/login';
					data = {
						username: this.username,
						password: this.password,
					};
				}
				// 请求 登录，验证码登录接口
				this.loading = true; // 封禁登录按钮
				this.$H
					.post(url, data)
					.then((res) => {
						// 登录成功处理
						// console.log(res);
						this.loading = false; // 解放登录按钮
						// 修改 vuex 的state 登录状态,持久化存储，用户信息
						this.$store.commit('login', res);
						/*----------监听异步 事件 openSocket----开启Socket -------*/
						this.$store.dispatch('openSocket');
						// 提示消息 和跳转页面
						uni.showToast({
							title: '登录成功',
							icon: 'none',
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 800);
					})
					.catch((err) => {
						// 登录失败
						console.log(err);
						this.loading = false; // 解放登录按钮
					});
			},
		},
	};
</script>
<style lang="scss" scoped></style>
